<template>
  <!-- 成本记录 -->
    <div class="cost-record-wrap">
        <SearchBox @onReset="onReset" @onSearch="onSearch">
            <div class="search-item">
              <div class="item-wrap">
                <p class="search-item-label">站点编码：</p>
                <el-select
                  v-model="searchParams.sitCode"
                  placeholder="请选择站点"
                  filterable
                  clearable
                  style="width:100%"
                >
                  <el-option
                      v-for="item in siteOptions"
                      :key="item.sitCode"
                      :label="item.sitName"
                      :value="item.sitCode"
                  />
                </el-select>
              </div>
              <div class="item-wrap">
                <p class="search-item-label">成本年月：</p>
                <el-date-picker
                  v-model="searchParams.costMonth"
                  type="month"
                  placeholder="请选择月份"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  style="width:100%"
                />
              </div>
            </div>
        </SearchBox>
        
        <TableBox :data="tableData" :columns="allColumns">
            <template v-slot:btn>
                <div class="btn-wrap" >
                    <el-button type="primary" @click="onAdd">新增</el-button>
                    <!-- <el-button type="primary">打印</el-button> -->
                </div>
            </template>
            <template #costFlag="{row}">
                <span>{{ Number(row.costFlag) === 1 ? '已审核' : '未审核' }}</span>
            </template>
        </TableBox>
        <addRecord
         :visible="addVisible"
         :entry="entry"
         :data="rowData"
         @close="addVisible=false" 
         @confirm="onConfirm"/>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive,ref, onMounted } from 'vue'
import addRecord from './components/addRecord.vue'
import { apiSiteList, apiCostRecordList, apiCostRecordDel } from '@/api/cost'

onMounted(() => {
  getList()
  init()
})

let addVisible = ref(false)
let searchParams = ref({
  siteOptions: '',
  costMonth: ''
})
let tableData = ref([])
let rowData = ref({})
let entry = ref('')
let siteOptions = ref([]) // 站点列表

const allColumns = reactive([
  {
    label: '#',
    type: 'index'
  },
  {
    label: '站点名称',
    key: 'sitName'
  },
  {
    label: '成本年月',
    key: 'costMonth'
  },
  {
    label: '成本项目',
    key: 'itemName'
  },
  {
    label: '成本值',
    key: 'costValue'
  },
  {
    label: '审核状态',
    key: 'costFlag',
    slot: 'costFlag'
  },
  {
    type: 'operations',
    fixed: 'right',
    width: 150,
    actions: (params) =>{
      // console.log('actions',params)
      let btnList = [
        {
          label: '编辑',
          click: () => {
            entry.value = 'edit'
            rowData.value = params.row
            addVisible.value = true
                    
          }  
        }]
      if(Number(params.row.costFlag) === 1) {
        btnList.push({
          label: '取消审核',
          type: 'danger',
          click: () => handleDel(params.row)
        })
      }
      return btnList
    }
  }
])
// 获取站点列表、 成本项目列表
const getList = async() => {
  const res = await apiSiteList()
  siteOptions.value = res
}
// 初始化列表
const init = async () => {
  let res = await apiCostRecordList({
    ...searchParams.value
  })
    
  tableData.value = res.data || []
}
// 新增 
const onAdd = () => {
  entry.value = 'add'
  rowData.value = {}
  addVisible.value = true
}
// 新增修改完成回调
const onConfirm = () => {
  init()
  addVisible.value = false
}
// 停用
const handleDel = ({ sitCode, costMonth,costItem }) => {
  ElMessageBox.confirm(`是否确认取消审核该记录？`,'提示',{
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    apiCostRecordDel({
      sitCode, costMonth, costItem
    }).then(() => {
      init()
      ElMessage.success('操作成功')
    })
  })   
}
// 清空筛选条件，并查询
const onReset = () => {
  searchParams.value = {
    siteOptions: '',
    costMonth: ''
  }
  onSearch()
}
// 查询
const onSearch = () => {
  init('search')
}

</script>

<style lang="scss" scoped>
.cost-record-wrap {
  .search-item {
    width: calc(100vw - 900px);
    max-width: 700px;
    .item-wrap {
      flex: 1;
      display: flex;
     
      .search-item-label {
        width:110px;
      }
     
    }
  }
}
</style>